<template>
  <!-- 歌曲评论 -->
  <div class="song_comment" ref="songCommentDom">
    <div
      class="hot_comment"
      ref="hotComment"
      v-if="songComments.hotComments && songComments.hotComments.length !== 0"
    >
      <div class="hot_comment_title">精彩评论</div>
      <div
        class="item"
        v-for="item in songComments.hotComments"
        :key="item.commentId"
      >
        <div class="pic">
          <img :src="item.user.avatarUrl" alt="" class="pic_url" />
        </div>
        <div class="detail">
          <span class="author">{{ item.user.nickname + "：" }}</span>
          <span class="comment">{{ item.content }}</span>
          <div class="timer">
            <span class="dt">{{ getTimer(item.time) }}</span>
            <span class="goods"> {{ item.likedCount }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="new_comment">
      <div class="new_comment_title">最新评论</div>
      <div
        class="item"
        v-for="item in songComments.comments"
        :key="item.commentId"
      >
        <div class="pic">
          <img :src="item.user.avatarUrl" alt="" class="pic_url" />
        </div>
        <div class="detail">
          <span class="author">{{ item.user.nickname + "：" }}</span>
          <span class="comment">{{ item.content }}</span>
          <div class="timer">
            <span class="dt">{{ getTimer(item.time) }}</span>
            <span class="goods"> {{ item.likedCount }}</span>
          </div>
        </div>
      </div>
    </div>
    <Page
      :total-data="totalData"
      :page-num="20"
      @change-page="changePage"
    ></Page>
  </div>
</template>

<script>
import {
  defineComponent,
  inject,
  reactive,
  toRefs,
  ref,
  watch,
  onUpdated,
} from "vue";
import Page from "@/components/page/Page.vue";
import { completeFormatDate } from "@/utils/formate.js";

export default defineComponent({
  name: "SongComment",
  components: {
    Page,
  },
  setup(props, context) {
    let songComments = inject("songComments");
    let data = reactive({
      totalData: 0,
    });
    let hotComment = ref(null);
    let songCommentDom = ref(null);

    onUpdated(() => {
      data.totalData = songComments.value.total;
    });

    watch(
      () => songComments.value,
      () => {
        data.totalData = songComments.value.total;
      }
    );

    // 获取时间
    let getTimer = (time) => {
      return completeFormatDate(new Date(time), "yyyy-MM-dd hh:mm");
    };

    // 改变页码
    let changePage = (page) => {
      context.emit("changePage", page);
      songCommentDom.value.scrollTop = hotComment.value.offsetHeight;
    };

    return {
      ...toRefs(data),
      songComments,
      hotComment,
      songCommentDom,
      getTimer,
      changePage,
    };
  },
});
</script>
<style scoped>
.song_comment {
  width: 30%;
  height: 100%;
  overflow-y: auto;
  padding: 10px 0;
  padding-right: 24px;
}
.hot_comment,
.new_comment {
  width: 100%;
  border-bottom: 2px solid #ccc;
  margin-bottom: 10px;
}
.hot_comment_title,
.new_comment_title {
  font-size: 18px;
  color: #fff;
  font-weight: 700;
}

.item {
  width: 100%;
  display: flex;
  margin: 14px 0;
}
.pic {
  width: 60px;
  height: 60px;
  margin-right: 10px;
}

.pic_url {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.detail {
  flex: 1;
}

.author {
  font-size: 14px;
  color: #76a2c8;
  margin-right: 10px;
}
.comment {
  font-size: 14px;
  color: #d5d5d5;
}

.timer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.dt,
.goods {
  font-size: 14px;
  color: #888;
}
.goods {
  color: #c20c0c;
}
</style>
